<!DOCTYPE html>
<html>
	<head>
		<title>Dojo/on Performance Test</title>
		<style type="text/css">
			@import "../../resources/dojo.css";
		</style>
		<script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug:true, async:true"></script>
		<script type="text/javascript">
		require([
			"dojo/dom",
			"dojo/dom-construct",
			"dojo/on",
			"dojo/query",
			"doh",
			"dojo/domReady!"
		], function(dom, domConstruct, on, query, doh){

			doh.register("on() performance tests", [
				{
					name: "1000 on.emit() calls, no listeners",
					testType: "perf",
					trialIterations: 20,
					setUp: function(){
						dom.byId("status").innerHTML = "Running no listeners test...";
						button = dom.byId("emitbutton");
					},
					tearDown: function(){
					},
					runTest: function(){
						for(var i=0; i<1000; i++){
							on.emit(button, "myevent", {bubbles: true, cancelable: true});
						}
					}
				},
				{
					name: "1000 on.emit() calls, listener on same node",
					testType: "perf",
					trialIterations: 20,
					setUp: function(){
						dom.byId("status").innerHTML = "Running one listener test...";

						cnt = 0;
						on(button, "myevent", function(evt){ cnt++; } );
					},
					tearDown: function(){
					},
					runTest: function(){
						for(var i=0; i<1000; i++){
							on.emit(button, "myevent", {bubbles: true, cancelable: true});
						}
					}
				},
				{
					name: "1000 on.emit() calls, listener on same node and ancestor",
					testType: "perf",
					trialIterations: 20,
					setUp: function(){
						dom.byId("status").innerHTML = "Running two listener test...";

						on(dom.byId("emit"), "myevent", function(evt){ cnt++; } );
					},
					tearDown: function(){
					},
					runTest: function(){
						for(var i=0; i<1000; i++){
							on.emit(button, "myevent", {bubbles: true, cancelable: true});
						}
					}
				},

				function results(){
					dom.byId("status").innerHTML = "Graphing results...";
				}
			]);

			doh.run();
		});
		</script>
	</head>
	<body>
		<h1>Dojo/on Performance Test</h1>

		<!-- Display progress messages so test doesn't seem hung -->
		<h2 id="status"></h2>

		<!-- Test results are displayed here -->
		<div id="perfTestsBody"></div>

		<div id="emit">
			<div>
				<form id="emitinner">
					<button id="emitbutton">hi</button>
				</form>
			</div>
		</div>
	</body>
</html>
